<template>
  <div class="add-address-container">
    <van-form label-width="80px" class="address-container" ref="form">
      <van-field
        v-model="form.username"
        name="收货人"
        label="收货人"
        placeholder="请输入姓名"
        :rules="[{ required: true, message: '请输入姓名' }]"
      />
      <van-field
        v-model="form.telephone"
        name="手机号码"
        label="手机号码"
        placeholder="请输入新加坡8位手机号码"
        :rules="[{ required: true, message: '请输入新加坡8位手机号码' }]"
      />
      <van-field
        v-model="form.zipcode"
        name="邮政编码"
        label="邮政编码"
        placeholder="请输入邮政编码"
        :rules="[{ required: true, message: '请输入邮政编码' }]"
      />
      <van-field
        v-model="form.address"
        name="详细地址"
        label="详细地址"
        placeholder="请输入详细地址"
        :rules="[{ required: true, message: '请输入详细地址' }]"
      />
    </van-form>
    <div>
      <van-button class="submit" round block type="info" @click="onSubmit">提交</van-button>
      <van-button class="del" v-if="isEdit" round block type="info" @click="onDel">删除</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: null, // 收货人姓名
        telephone: null, // 电话
        zipcode: null, // 邮政编码
        address: null // 详细地址
      }
    };
  },
  computed: {
    isEdit() {
      return this.$route.query.type === "edit";
    }
  },
  mounted() {
    if (this.$route.query.type === "edit") {
      this.form = {
        id: this.$route.query.id,
        address: this.$route.query.address,
        username: this.$route.query.name,
        telephone: this.$route.query.tel,
        zipcode: this.$route.query.zipcode
      };
    }
    console.log();
  },
  methods: {
    async onSubmit() {
      const validate = await this.$refs["form"].validate();
      if (!this.isEdit) {
        this.$dialog.confirm({
          title: "温馨提示",
          message: "是否添加该地址？"
        }).then(async () => {
          const res = await this.$fetchPost(
            "/home/member/editaddress",
            this.form
          );
          if (!res.success) {
            this.$toast(res.msg);
            return;
          }
          this.$toast("添加成功");
          window.history.back()
        }).catch(() => {
          // on cancel
        });
      } else {
        this.$dialog.confirm({
          title: "温馨提示",
          message: "是否修改该地址？"
        }).then(async () => {
          const res = await this.$fetchPost(
            "/home/member/editaddress",
            this.form
          );
          if (!res.success) {
            this.$toast(res.msg);
            return;
          }
          this.$toast("添加成功");
          window.history.back()
        }).catch(() => {
          // on cancel
        });
      }
    },
    async onDel() {
      this.$dialog
        .confirm({
          title: "温馨提示",
          message: "是否删除该地址？"
        })
        .then(async () => {
          const res = await this.$fetchGet("/home/member/deleteaddress", {
            id: this.form.id
          });
          if (!res.success) {
            this.$toast(res.msg);
            return;
          }
          this.$toast("删除成功");
          window.history.back()
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style lang="scss">
.add-address-container {
  .address-container {
    margin-top: 50px;
    box-shadow: 0 0 10px #888;
  }
  .submit {
    width: 90vw;
    margin-left: 5vw;
    margin-top: 50px;
    height: 70px;
    border-radius: 70px;
    background: linear-gradient(to right, #fc8f04, #f71c19);
  }
  .del {
    width: 90vw;
    margin-left: 5vw;
    margin-top: 50px;
    height: 70px;
    border-radius: 70px;
    // background: ;
  }
}
</style>